<template>
  <div class="task-list">
    <!-- 任务列表 -->
    <ul v-if="tasks.length > 0">
      <PlanItem
          v-for="task in tasks"
          :key="task.id"
          :task="task"
          :status="task.status"
          @action="handleAction"
      />
    </ul>

    <!-- 空状态提示 -->
    <div v-else class="empty-state">
      <svg
          xmlns="http://www.w3.org/2000/svg"
          width="100"
          height="100"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="empty-icon"
      >
        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
        <line x1="12" y1="9" x2="12" y2="13" />
        <line x1="12" y1="17" x2="12" y2="17" />
      </svg>
      <p class="empty-text">当前没有任务，快去创建一个吧！</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import PlanItem from '@/zdpui/application/plan/PlanItem.vue'; // 引入任务内容组件

// 定义 props
const props = defineProps({
  tasks: {
    type: Array,
    required: true,
  },
});

// 定义 emits
const emit = defineEmits(['action']);

// 处理按钮点击
const handleAction = (actionType, task) => {
  emit('action', actionType, task); // 向上传递事件类型和任务内容
};
</script>

<style scoped>
.task-list {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 20px auto;
  width: 100%;
}

.task-list ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 20px;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.empty-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  color: #a0aec0; /* 浅灰色 */
}

.empty-text {
  font-size: 16px;
  color: #666;
  margin: 0;
}
</style>